<template>
    <div>
        <div>asdasdasdasd</div>
        <div id='myChart' :style="{width:'600px', height: '300px'}"></div>
    </div>
</template>

<script>
import md5 from 'js-md5';
import axios from 'axios'
import echarts from 'echarts'
import { info_get } from '../axios_send/api'
export default {
    data() {
        return {
            
        }
    },
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            // let myChart = this.$echarts.init(document.getElementById('myChart'))
            // // 绘制图表
            // var data1 = []
            // var data2 = []
            // info_get().then(res=>{
            //     data1 = res.date_list
            //     data2 = res.high_list
            //     myChart.setOption({
                
            //         title: {
            //             text: 'ECharts 入门示例'
            //         },
            //         tooltip: {},
            //         xAxis: {
            //             data: data1
            //         },
            //         yAxis: {},
            //         series: [{
            //             name: '股票',
            //             type: 'line',
            //             data: data2
            //         }]
            //     });
            // })
        }
    },
    mounted(){
        this.drawLine()
        
        var ed2020 = "2020";
        var sign = md5('price=500&goodid=3,1'+ed2020);
        console.log(sign);
        var _this = this;
        //判断浏览器是否支持websocket
        if("WebSocket" in window){
        console.log("支持");
        //生成websocket链接
        var ws = new WebSocket("ws://127.0.0.1:8001/user/websocketlink/");
        //发送链接请求
        ws.onopen = function(){
            ws.send("test");
        }
        //发送消息
        ws.onmessage = function(evt){
            //将获取信息打印
            var received_msg = evt.data;
            // data = JSON.parse(received_msg)
            var data
            
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart'))
            // 绘制图表
            data = JSON.parse(received_msg)
            console.log(data)
            var date_list = []
            var high_list = []
            var open_list = []
            var low_list = []
            var close_list = []
            var pre_close = []
            date_list = data.date_list
            high_list = data.high_list
            open_list = data.open_list
            low_list = data.low_list
            close_list = data.close_list
            pre_close = data.pre_close
            myChart.setOption({
            
                title: {
                    text: '股票每日行情'
                },
                tooltip: {},
                xAxis: {
                    data: date_list
                },
                yAxis: {},
                series: [
                    {
                        name: '最高点',
                        type: 'line',
                        data: high_list
                    },
                    {
                        name: '开盘',
                        type: 'line',
                        data: open_list
                    }
                    ,
                    {
                        name: '最低点',
                        type: 'line',
                        data: low_list
                    }
                    ,
                    {
                        name: '收盘点',
                        type: 'line',
                        data: close_list
                    }
                    ,
                    {
                        name: '查一查',
                        type: 'line',
                        data: pre_close
                    }
                ]
            });
        }
        //捕获断开链接
        ws.onclose = function(){
            console.log("链接已经关闭");
        }
    }

    },
    created() {
        
        
    }
}
</script>

<style scoped>

</style>
